<template>
  <div class="wrapper">
    <minbar title="确认兑换" :isPadding="true"></minbar>
    <!-- tab切换页 -->
    <div class="x-tab">
      <div class="x-tab-button x-center" @click="tabClick(0)">
        <text :class="['x-tab-text',tabActive?'x-tab-active':'']">门店自提(免运费)</text>
      </div>
      <div class="x-tab-button x-center" @click="tabClick(1)">
        <text :class="['x-tab-text',tabActive?'':'x-tab-active']">工厂发货(付运费)</text>
      </div>
    </div>
    <scroller class="x-scroller" show-scrollbar="flase">
    <!-- 收货地址 -->
      <div class="x-content-div margin-top">
        <div class="x-content-info">
          <text class="x-content-name">收货人：张杰 13529061734</text>
          <text class="x-content-address">收货地址：云南省昆明市西山区滇缅大道37号</text>
        </div>
        <text class="x-content-icon iconfont">&#xe61b;</text>
      </div>  
    <!-- 现金券 -->
      <div class="x-content-div">
        <text class="x-content-icon2 iconfont">&#xe6b7;</text>
        <div class="x-content-info">
          <text class="x-content-name">现金券：0元</text>
        </div>
        <text class="x-content-name">本次抵用：</text>
        <text class="x-content-price">339元</text>
      </div>
      <!-- 订单信息 -->
      <orderpage 
          :listData="listData" 
          :showTitle="false"
          :showBottom="false">
          <!-- 备注信息 -->
          <div slot="page" class="x-remak x-bottom-border">
            <text class="x-ramak-text">备注留言：</text>
            <input type="text" class="x-remak-input" />
          </div>
      </orderpage>
    </scroller>
    <div class="x-bottom">
      <div class="x-allprice">
        <div class="x-price-left">
          <text class="x-pt-text">抵扣：</text>
          <text class="x-pt-price">¥399.00</text>
          <text class="x-pt-text margin-left">运费：</text>
          <text class="x-pt-price">¥6.00</text>
        </div>
        <text class="x-pt-text">小计：</text>
        <text class="x-pt-color">¥1406.00</text>
      </div>
      <text class="x-submit-btn">提交订单</text>
    </div>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
export default { 
  components: {
    "button": require("../../../common/component/button.vue"),
    "minbar" : require("../../../common/component/minbar.vue"),
    "orderpage" : require("../myinfo/comp/orderPage.vue"),
  },
  computed: {
      tabActive () {
        if(this.showActive) {
          return true;
        }else{
          return false;
        }
      }
  },
  data() {
    return {
      showActive:false,
      listData:[{
            typeName: "交易成功",
            typeCode: "cg",
            title: "南通老裁缝家纺",
            shopData: [
                {
                    img: asCore.localpath + 'img/order/order.png',
                    title: "老裁缝家纺 欧式床单十件套",
                    explain: "尺寸：200m×200m 颜色：白色",
                    price: 499.00,
                    num: 1
                }
            ]
        }
      ]
      
    };
  },
  methods: {
    tabClick(index){
        if(index==0){
            this.showActive = true;
        }else if(index==1){ 
            this.showActive = false;
        }
    }
  }
};
</script>
<style scoped>
.wrapper {
    background-color: #dedfe1;
}
.iconfont {
    font-family:iconfont;
}
.margin-top {
    margin-top:20px;
}
.margin-left {
    margin-left:20px;
}
.x-tab {
    height: 100px;
    border-bottom-width:2px;
    border-bottom-color: #e0e0e2;
    flex-direction: row;
    background-color: #fff;
}
.x-center{
    align-items: center;
    justify-content: center;
}
.x-tab-button {
    flex: 1;
}
.x-tab-button:active {
    background-color: #eee;
}
.x-tab-text {
    color:#1f1e24;
    font-size:32px;
    /*color:#9c9ba1*/
}
.x-tab-active {
    color: #887147;
}
.x-content-div {
  background-color: #fff;
  margin-bottom: 20px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
  padding-left: 25px;
  padding-right: 25px;
}
.x-content-div:active{
  background-color: #eee;
}
.x-content-icon {
  width: 50px;
  font-size:50px;
  color:#2e2e4d;
}
.x-content-info {
  flex: 1;
}
.x-content-name {
  font-size: 32px;
  color: #1e1d23;
}
.x-content-price {
  font-size: 32px;
  color: #b1092a;
}
.x-content-address {
  padding-top:10px;
  font-size:28px;
  color: #1f1e23;
}
.x-content-icon2 {
  width: 65px;
  font-size:50px;
  color:#201f24;
  top:3px;
}
.x-remak {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 25px;
}
.x-ramak-text {
  color: #68686a;
  font-size:30px;
}
.x-remak-input {
  flex: 1;
  height: 85px;
  font-size: 30px;
}
.x-bottom-border {
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
}
.x-bottom {
  position: absolute;
  bottom: 0;
  width: 750px;
  height: 190px;
  background-color: #fff;
}
.x-scroller {
  position: absolute;
  top: 230px;
  left: 0;
  right: 0;
  bottom: 190;
}
.x-allprice {
  height: 90px;
  align-items: center;
  justify-content: center;
  padding-left: 25px;
  padding-right: 25px;
  flex-direction: row;
}
.x-price-left {
  flex: 1;
  flex-direction: row;
}
.x-submit-btn {
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #887147;
  color: #fff;
  font-size: 30px;

}
.x-pt-text {
  color: #201f25;
  font-size: 28px;
}
.x-pt-price {
  color:#b1092a;
  font-size: 30px;
  top:3px;
}
.x-pt-color {
  color:#b1092a;
  font-size: 32px;
}
</style>
